<template>
  <div class="home-container">
    <div class="navbar">
      <div class="logo">ACE MVP</div>
      <div class="user-info">{{ email }}</div>
    </div>
    <div class="main-content">
      <div class="sidebar">
        <ul>
          <li 
            v-for="menu in menus" 
            :key="menu.name"
            @click="toggleMenu(menu)"
          >
            {{ menu.label }}
            <ul v-if="menu.children && (1 || activeMenu === menu.name || alwaysOpenMenus.includes(menu.name))">
              <li
                v-for="child in menu.children"
                :key="child.name"
                @click.stop="navigateTo(child)"
                :class="{ active: $route.name === child.name }"
              >
                {{ child.label }}
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="content-area">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const email = localStorage.getItem('email') || 'test@example.com'
    const activeMenu = ref('')
    const alwaysOpenMenus = ref(['operations', 'management'])

    const menus = [
      {
        name: 'operations',
        label: '运维情况',
        children: [
          { name: 'dashboard', label: 'Dashboard' }
        ]
      },
      {
        name: 'management',
        label: '运营管理',
        children: [
          { name: 'operations', label: '用户管理' }
        ]
      },
      {
        name: 'prod',
        label: 'PROD环境',
        children: [
          { name: 'prod-job-center', label: 'Job中心' },
          { name: 'prod-schedule-center', label: 'Schedule中心' }
        ]
      },
      {
        name: 'local',
        label: 'LOCAL环境',
        children: [
          { name: 'local-job-center', label: 'Job中心' },
          { name: 'local-schedule-center', label: 'Schedule中心' }
        ]
      }
    ]

    const toggleMenu = (menu) => {
      if (menu.children) {
        activeMenu.value = activeMenu.value === menu.name ? '' : menu.name
      } else {
        navigateTo(menu)
      }
    }

    const navigateTo = (menuItem) => {
      router.push({ name: menuItem.name })
    }

    return {
      email,
      menus,
      activeMenu,
      alwaysOpenMenus,
      toggleMenu,
      navigateTo
    }
  }
}
</script>

<style scoped>
.home-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #2c3e50;
  color: white;
}

.logo {
  font-weight: bold;
  font-size: 1.2rem;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.sidebar {
  width: 200px;
  background-color: #f5f5f5;
  border-right: 1px solid #ddd;
  overflow-y: auto;
}

.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  padding: 10px 15px;
  cursor: pointer;
}

.sidebar li:hover {
  background-color: #e0e0e0;
}

.sidebar li.active {
  background-color: #42b983;
  color: white;
}

.sidebar li ul {
  margin-left: 15px;
}

.sidebar li ul li {
  padding: 8px 15px;
}

.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}
</style>
